<!-- 饼状图 -->
<template>
  <div id="hcpie"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, reactive, watch } from "vue";
import { useStore } from "@/store/useStore";

const store = useStore();
const option = reactive({
  toolbox: {
    show: true,
    //orient: 'vertical',
    left: 'right',
    top: 'top',
    feature: {
      saveAsImage: {}
    }
  },
  tooltip: {
    trigger: 'item'
  },
  // legend: {
  //   top: '10%',
  //   left: 'center'
  // },
  series: [
    {
      name: '建筑高度数量分布（栋）',
      type: 'pie',
      radius: ['53%', '95%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [

      ]
    }
  ]
});

let pie = null;

watch(() => store.dsByHeight, () => {
  pie.dispose();
  option.series[0].data = store.dsByHeight;
  pie = echarts.init(document.getElementById("hcpie"));
  option && pie.setOption(option);
}, { deep: true })


onMounted(() => {
  pie = echarts.init(document.getElementById("hcpie"));
  option && pie.setOption(option);
});
</script>

<style scoped>
#hcpie {
  width: 100%;
  height: 400px;
}
</style>
